/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018/11/24 Time: 14:01
 */

import {StyleSheet} from 'react-native';
import {
    COLOR_FOCUS,
    COLOR_GRAY_BACKGROUND,
    COLOR_GRAY_LINE, COLOR_THEME,
    COLOR_WHITE,
    FONT_COLOR_SUB_TITLE,
    FONT_COLOR_TITLE, FONT_SIZE_14,
    FONT_SIZE_SUB_TITLE,
    FONT_SIZE_TITLE
} from "../../../constant/PHColors"
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../../../constant/PHScreen";
import {Header} from "react-navigation";

export const styles = StyleSheet.create({

    container: {
        flex: 1,
        backgroundColor: '#ffffff',
    },

    body:{
        height:SCREEN_HEIGHT-Header.HEIGHT-40-40,
    },

    cellBox:{
        height: 40,
        width: (SCREEN_WIDTH-30) / 4,
        left:15,
        flexDirection: 'row',
        backgroundColor: '#d6f1ff',
        borderColor: '#FAFAFA',
        borderLeftWidth: 5,
        borderTopWidth: 5,
        borderRightWidth: 5,
        borderBottomWidth: 5,
        borderRadius: 15,
    },

    cellBoxLeft: {
        height: 40,
        width: SCREEN_WIDTH / 3,
        flexDirection: 'row',
        backgroundColor: COLOR_WHITE,
        borderColor: '#FAFAFA',
        borderLeftWidth: 0,
        borderTopWidth: 5,
        borderRightWidth: 5,
        borderBottomWidth: 5
    },

    cellBoxCenter: {
        height: 40,
        width: SCREEN_WIDTH / 3,
        flexDirection: 'row',
        backgroundColor: COLOR_WHITE,
        borderColor: '#FAFAFA',
        borderLeftWidth: 5,
        borderTopWidth: 5,
        borderRightWidth: 5,
        borderBottomWidth: 5
    },

    cellBoxRight: {
        height: 40,
        width: SCREEN_WIDTH / 3,
        flexDirection: 'row',
        backgroundColor: COLOR_WHITE,
        borderColor: '#FAFAFA',
        borderLeftWidth: 5,
        borderTopWidth: 5,
        borderBottomWidth: 5,
        borderRightWidth: 0
    },

    cellRight: {
        flex: 1,
        marginLeft: 0
    },

    cellRightTop: {
        flex: 1,
        borderTopRightRadius: 5,
        alignItems:'center',
        justifyContent: 'center',
    },

    cellTitleText: {
        fontSize: FONT_SIZE_TITLE,
        color: FONT_COLOR_TITLE,
        marginBottom: 1,
        textAlign:'center',
        justifyContent: 'center',
    },

    modalContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.3)'
    },

    modalView: {
        width: SCREEN_WIDTH - 100,
        // height: 300,
        backgroundColor: '#FFF',
        borderRadius: 10
    },

    modalHeader: {
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth: 2,
        borderBottomColor: COLOR_THEME
    },

    modalHeaderText: {
        fontSize: 18,
        color: COLOR_FOCUS
    },

    modalItemView: {
        flexDirection:'row',
        height:50,
        width: SCREEN_WIDTH - 100,
    },

    modalItemViewLeft: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'flex-start',
        paddingLeft:20,
    },

    modalItemViewRight:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'flex-end',
        paddingRight:20,
    },

    modalItemText: {
        fontSize: 20,
        color: FONT_COLOR_TITLE
    },

    modalBottomView: {
        justifyContent: 'center',
        alignItems: 'center',
        height:50,
        width: SCREEN_WIDTH - 100,
        flexDirection:'row',
    },

    modalBottomText: {
        fontSize: 20,
        color: FONT_COLOR_TITLE
    },

    cellView: {
        height: 90,
        flexDirection: 'row',
        backgroundColor: COLOR_WHITE,
        borderBottomColor: COLOR_GRAY_LINE,
        borderBottomWidth: 1
    },

    cellRightView: {
        flex: 1
    },

    cellRightTopView: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'flex-start'
    },

    cellRightTopText: {
        marginLeft: 5,
        marginBottom: 4,
        fontSize: FONT_SIZE_TITLE,
        color: FONT_COLOR_TITLE
    },

    boxBody: {
        height: 90,
        backgroundColor: COLOR_WHITE,
        borderColor: '#FAFAFA',
        borderLeftWidth: 5,
        borderTopWidth: 5,
        borderBottomWidth: 5,
        borderRightWidth: 5,
    },

    top: {
        height: 30,
        flexDirection: 'row'
    },

    topLeft: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },

    topPointText: {
        fontSize: 18,
        color: 'black',
        marginLeft: 20
    },

    topRight: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center'
    },

    topFromTextRed:{
        fontSize: 16,
        color: 'white',
        marginRight: 20,
        backgroundColor: '#FF0000',
        paddingLeft: 5,
        paddingRight: 5,
    },

    topFromTextBlue: {
        fontSize: 16,
        color: 'white',
        marginRight: 20,
        backgroundColor: COLOR_FOCUS,
        paddingLeft: 5,
        paddingRight: 5,
    },

    topFromTextWhite: {
        fontSize: 14,
        color: 'white',
        marginRight: 20,
        backgroundColor: 'white',
        paddingLeft: 5,
        paddingRight: 5,
    },

    center: {
        marginTop: 5,
        marginLeft: 20,
        marginRight: 20,
    },

    centerText: {
        fontSize: 17,
        color: FONT_COLOR_TITLE
    },

    bottom: {
        height: 20,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },

    bottomText: {
        fontSize: 15,
        color: FONT_COLOR_SUB_TITLE,
        marginRight: 15
    },

    headerContainer: {
        height: 32,
        width:SCREEN_WIDTH,
        backgroundColor: COLOR_GRAY_BACKGROUND,
        alignItems: 'center',
        flexDirection:'row',
        justifyContent: 'space-between',
    },

    headerText: {
        fontSize: FONT_SIZE_14,
        color: FONT_COLOR_SUB_TITLE,
        marginLeft: 15
    },

    selectTop:{
        borderBottomColor:'#e4e4e4',
        borderBottomWidth:1,
        flexDirection: 'row',
        width: SCREEN_WIDTH - 30,
        left:15,
        paddingBottom: 5,
        marginBottom:5,
    },

    selectTopBox:{
        height: 40,
        width: (SCREEN_WIDTH-30) / 4,
        flexDirection: 'row',
        backgroundColor: '#d6f1ff',
        borderColor: '#FAFAFA',
        borderLeftWidth: 5,
        borderTopWidth: 5,
        borderRightWidth: 5,
        borderBottomWidth: 5,
        borderRadius: 15,
    },

    cellBox2:{
        height: 40,
        width: (SCREEN_WIDTH-30) / 4,
        flexDirection: 'row',
        backgroundColor: '#d6f1ff',
        borderColor: '#FAFAFA',
        borderLeftWidth: 5,
        borderTopWidth: 5,
        borderRightWidth: 5,
        borderBottomWidth: 5,
        borderRadius: 15,
    },

    selectBox:{
        flexDirection:'column'
    },

    selectTopText:{
        width:(SCREEN_WIDTH),
        flex: 1,
    },

    windowCenter:{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
})